<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" shadow="never">
			<div class="font-medium mb-7">基础信息</div>
			<el-form ref="formRef" class="ls-form" :model="formData" :rules="rules" label-width="100px">
                <el-form-item label="名称" prop="name">
					<div class="w-80">
						<el-input
							v-model="formData.name"
							placeholder="请输入名称"
							type="text"
							maxlength="30"
							show-word-limit
							clearable
						/>
					</div>
				</el-form-item>
                <el-form-item label="微信链接" prop="name">
					<div class="w-[800px]">
                        <el-input
							v-model="formData.wx_str"
							placeholder="请输入微信链接"
							type="textarea"
                  			:autosize="{ minRows: 2, maxRows: 12}"
							maxlength="600"
							show-word-limit
							clearable
						/>
					</div>
				</el-form-item>
				<!-- <el-form-item label="群图像" prop="pics">
					<div class="w-80">
						<div>
							<material-picker v-model="formData.pics" :limit="1"/>
						</div>
						<div class="form-tips">建议尺寸：200*200px</div>
					</div>
				</el-form-item>
				<el-form-item label="简介" prop="introduction">
					<div class="w-80">
						<el-input
							v-model="formData.introduction"
							placeholder="请输入简介"
							type="textarea"
                  			:autosize="{ minRows: 2, maxRows: 12}"
							maxlength="600"
							show-word-limit
							clearable
						/>
					</div>
				</el-form-item>
				<el-form-item label="公告" prop="notification">
					<div class="w-80">
						<el-input
							v-model="formData.notification"
							placeholder="请输入公告"
							type="textarea"
                  			:autosize="{ minRows: 2, maxRows: 12}"
							maxlength="600"
							show-word-limit
							clearable
						/>
					</div>
				</el-form-item>
				<el-form-item label="管理员" prop="userinfo.realname">
					<div class="w-80">
						<el-input
							v-model="formData.userinfo.realname"
							placeholder="请选择管理员"
							type="text"
							maxlength="30"
							show-word-limit
							clearable
							readonly
						>
							<template #append>
								<el-button @click="addUser" :disabled="!!route.query.id">
									添加
									<icon name="el-icon-Plus"/>
								</el-button>
							</template>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="添加好友">
					<div class="w-80">
						<el-radio-group v-model="formData.can_add_friend">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</div>
				</el-form-item> -->
			</el-form>
		</el-card>
		<el-card v-if="route.query.id" class="mt-4 !border-none" header="群聊成员" shadow="never">
			<el-button type="primary" class="mb-4" @click="onAdd">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
				添加渠道
            </el-button>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column type="index" label="序号" min-width="80" :index="indexAdd"/>
				<el-table-column label="名称" min-width="130" prop="realname"/>
				<el-table-column label="图片" min-width="100" prop="face">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px"
								:src="row.face"
								:zoom-rate="1.2"
								:max-scale="7"
								:min-scale="0.2" 
								fit="contain"
								:preview-teleported="true"
								:preview-src-list="[row.face]">
							</el-image>
                        </div>
                    </template>
                </el-table-column>
				<el-table-column label="账号" min-width="130" prop="account"/>
				<el-table-column label="操作" min-width="130">
					<template #default="{ row }">
						<el-button size="small" v-perms="['user.kefu/delChannel']" type="danger" @click="onDel(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
		</el-card>
        <check_demand ref="checkDemand" @backAdmin="backAdmin" @backClose="backClose"></check_demand>
		<footer-btns>
			<el-button type="primary" v-perms="['user.group/saveGroup']" @click="handleSave" v-prevent-reclick="3000">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="demandReviewDetail">
	import type { FormInstance } from 'element-plus'
	import { kefuInfo, kefuChannel, saveGroup, delChannel } from '@/api/group';
	import check_demand from './check_demand.vue'
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback'
	const route = useRoute()
	const router = useRouter()
	const formData:any = reactive({
		id: '',
		name: '',
		wx_str: ''
	})
	const rules = reactive({
		name: [{required: true, message: '请填写名称', trigger: 'blur'}],
		wx_str: [{required: true, message: '请填写微信链接', trigger: 'blur'}],
	})
	const checkDemand = ref()
	const addUser = (value : any) => {
		checkDemand.value.init();
	}
	
	
	const formRef = shallowRef<FormInstance>()

	const getDetails = async () => {
		const data = await kefuInfo({
			kefu_id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			formData[key] = data.info[key]
		})
	}
	// 选择管理员返回
	const backAdmin = (row: any)=> {
		console.log('backAdmin')
		console.log(row)
		formData.userinfo.realname = row.real_name;
		formData.user_id = row.user_id;
		formData.user_type = row.user_type;
		formRef.value?.validate();
	}
	const backClose = () => {
		route.query.id && getLists();

	}

	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	let queryParams:any = reactive({
		kefu_id: route.query.id
        
	});
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: kefuChannel,
		params: queryParams
	})
	//添加成员弹窗
	const onAdd = () => {
		checkDemand.value.add(route.query.id);
	}
	// 删除成员
	const onDel = async (row:any) => {
		console.log(row)
		try{
			await feedback.confirm('是否确认删除')
			await delChannel({
				kefu_id: route.query.id,
				channel_id: row.channel_id,
			})
			getLists()
		}catch(error){
			console.log(error)
		}
		
	}
	//保存信息
	const handleSave = async () => {
		await formRef.value?.validate();
		let params = JSON.parse(JSON.stringify(formData));
		console.log(params)
		await saveGroup(params)
		router.back()
	}

	route.query.id && getDetails();
	route.query.id && getLists();
</script>
<style scoped lang="scss">
	.btnR{
		position: absolute;
		right: 50px;
		top: 30px;
	}
</style>